Javascript DOM编程艺术读书笔记11

发表于 | 分类于 ，

HTML5

Modernizr

  • 提供一些不同的CSS类名以及特性检测属性

    音频和视频

  • 在每个影片容器中，音频和视频轨道都使用不同的编解码器来编码。编码器决定了浏览器在播放时应该如何解码音频和视频。
  • 有代表性的视频解码器有：H.264、Theora和VP8
  • 没有一款浏览器支持所有容器和编解码器，因此必须提供多种后备格式。
  • 为了确保HTML5的最大兼容性，至少包含下列三个版本：

    基于H.264和AAC的MP4
    webM(VP8+Vorbis)
    基于Theora视频和Vorbis音频的Ogg文件

表单

  • 如果没有使用Modernize,可以使用如下函数检查浏览器是否支持某种类型的输入控件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function inputSupporsType(type){
        if(!document.createElement) return false;
        var input=document.createElement('input');
        //设置input表单的type属性
        input.setAttribute('type',type);
        //如果input表单的type属性是text,但是传入的type类型不是text,说明浏览器不支持该类型的输入控件
        if(input.type=='text'&&type!='text'){
            return false;
        }else{
            return true;
        }
    }

  • 如果没有使用Modernize,可以使用如下函数检查浏览器是否支持特定的属性

    1
    2
    3
    4
    5
    6
    function elementSupportsAttribute(elementName,attribute){
        if(!document.createElement) return false;
        var temp=document.createElement(elementName);
        //如果浏览器支持该属性，则会返回true，否则是false
        return(attribute in temp);
    }

  • 在不支持placeholder属性的浏览器中实现相同的效果，得编写以下DOM脚本实现完成同样的功能
    <input type="text" id="first-name" placeholder="you first name" />

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //使用Modernizr判断当前浏览器是否支持placeholder属性
    if(!Modernizr.input.placeholder){
        //根据id获得placeholder的input元素
        var input=document.getElementById('first-name');
        input.onfocus=function(){
            //如果input元素有placeholder属性值
            var text=this.placeholder||this.getAttribute('placeholder');
            //当鼠标焦距时是提示信息，就不显示提示信息
            if(this.value==text){
                this.value='';
            }
        }
        input.onblur=function(){
            //当鼠标离开时，没有文本内容，就仍然显示提示信息
            if(this.value==''){
                this.value=this.placeholder||this.getAttribute('placeholder');
            }
        }
        input.onblur();
    }